<template>
	<div>
		<h1>领券中心</h1>
		
		<div style="display: flex; flex-wrap: wrap;">
			
			<!-- 一张优惠券 -->
			<div v-for="coupon in coupons" style="width: 300px; height: 200px; 
				display: flex; flex-direction: column;
				justify-content: space-evenly;
				padding: 0px 20px; box-sizing: border-box;
				border-radius: 10px;
				margin: 20px;
				background-color: beige;
				box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
				
				<div style="font-size: 20px; font-weight: 900;">{{coupon.couponTitle}}</div>
				<div style="font-size: 13px; color: dimgray;">{{coupon.couponInfo}}</div>
				<div v-if="coupon.ttlType == 0" style="font-size: 13px; color: red; font-weight: 900;">
					有效时间：{{coupon.beginTime}} - {{coupon.endTime}}
				</div>
				<div v-else style="font-size: 13px; color: red; font-weight: 900;">
					有效时间：自领取之日起{{coupon.days}}天有效
				</div>
				<div style="align-self: flex-end;">
					<el-button v-if="coupon.number != 0" size="mini" type="success" @click="getCoupon(coupon.id)">领取优惠券</el-button>
					<el-button v-if="coupon.number == 0" disabled="true" size="mini" type="danger">已经领取完了</el-button>
				</div>
			</div>
			
		</div>
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				//优惠券列表
				coupons: []
			}
		},
		methods: {
			//查询优惠券列表
			couponList(){
				this.$.ajax({
					url: "/coupon/list",
					success: (res) => {
						this.coupons = res;
					}
				});
			},
			//领取优惠券
			getCoupon(couponId){
				this.$.ajax({
					type: "POST",
					url: "/coupon/getCoupon",
					data: {
						couponId: couponId,
						uid: 1
					},
					success: (data) => {
						this.$message.success("优惠券领取成功！");
					}
				});
			}
		},
		mounted() {
			this.couponList();
		}
	}
</script>

<style>
</style>